<template>
  <div id="tool-bar-width" class="tool-bar-width">
    <div :style="{width: clientWidth + 'px'}" class="tool-bar-container">
      <div class="tool-bar">
        <el-button v-if="hasRouteAuth('mengli:channelOrder:edit') || isAdmin" type="primary" size="small" class="submit-btn" @click="toEdit">编辑订单</el-button>
        <el-button type="info" size="small" class="back-btn cancel-btn-style" @click="toBack">返回</el-button>
      </div>
    </div>
  </div>

</template>

<script>
import { mapState } from 'vuex';
import { hasRouteAuth } from '@/utils/permission';

export default {
  props: {
    orderId: {
      type: String | Number,
      default: ''
    }
  },
  data() {
    return {
      btnLoading: false,
      clientWidth: ''
    };
  },
  computed: {
    ...mapState({
      'userInfo': state => state.user.userInfo
    }),
    isAdmin() {
      return this.userInfo.userName === '管理员';
    }
  },
  created() {
    this.$nextTick(() => {
      const widthEl = document.getElementById('tool-bar-width');
      this.clientWidth = widthEl.clientWidth;
      window.onresize = () => {
        const a = document.getElementById('tool-bar-width');
        this.clientWidth = a.clientWidth;
      };
    });
  },
  methods: {
    hasRouteAuth,
    toBack() {
      const source = this.$route.query.source;
      const query = {};
      if (!source || source !== 'all') {
        query.type = 3;
      }
      this.$router.push({
        name: 'mengliOrder',
        query
      });
    },
    toEdit() {
      this.$router.push({
        name: 'mengliOrderEdit',
        params: { id: this.orderId },
        query: { type: 3 }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.tool-bar-width {
  width: 100%;
  margin-bottom: 56px;
}
.tool-bar-container {
  position: fixed;
  bottom: 0;
  height: 80px;
  width: 100%;
  z-index: 100;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 56%, #FFFFFF 100%);
  border-radius: 0px 0px 8px 8px;
}
.tool-bar {
  // margin-bottom: 24px;
  // margin-top: 24px;
  width: 100%;
  border-radius: 0px 0px 8px 8px;
  display:flex;
  justify-content: center;
  bottom: 24px;
  position: absolute;
  &::v-deep {
    .el-button {
      margin-left: 16px;
    }
  }
}
.empty-btn-style {
  border-color: #406EFF;
  background: #fff;
  color: #406EFF;
}
</style>
<style lang="scss">
.message-box-order {
  .el-message-box__btns {
    display: none;
  }
  .el-message-box__content {
    padding-bottom: 0;
    padding-top: 20px;
  }
  .btns-container {
    margin-top: 40px;
    .resolve-btn {
      width: 120px;
      padding: 7px 0;
      background: #406EFF;
      border-radius: 4px;
      font-size: 16px;
      font-weight: 500;
      color: #FFFFFF;
    }
    .reject-btn {
      width: 80px;
      padding: 7px 0;
      font-size: 16px;
      font-weight: 500;
      border-color: #FDF3ED;
      background: #FDF3ED;
      color: #FD8546;
    }
    .cancel-btn {
      width: 80px;
      padding: 7px 0;
      font-size: 16px;
      font-weight: 500;
      border-color: #EFF3FB;
      background: #EFF3FB;
      color: #406EFF;
    }
  }
}

</style>
